<template>
    <!--为echarts准备一个具备大小的容器dom-->
      <div id="main" style="width: 600px; height: 400px"></div>
  </template>
  <script>
  import echarts from "echarts";
  export default {
    name: "",
    data() {
      return {
        charts: "",
        opinion: ["未登录人员", "已登录人员"],
        opinionData: [
          //渲染登录与未登录人员数量
          { value: 123, name: "未登录人员" },
          { value: 34, name: "已登录人员" },
        ],
      };
    },
    methods: {
      drawPie(id) {
        this.charts = echarts.init(document.getElementById(id));
        this.charts.setOption({
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            x: "left",
            data: this.opinion,
          },
          series: [
            {
              name: "登录情况",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "30",
                    fontWeight: "blod",
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: this.opinionData,
            },
          ],
        });
      },
    },
    //调用
    mounted() {
      this.$nextTick(function () {
        this.drawPie("main");
      });
    },
  };
  </script>
  <style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  </style>